<script setup>
import Footer from "@/components/Footer.vue";
import {useGoodsStore} from "@/stores/modules/goods"

const goodsStore=useGoodsStore()

const  on = async (brand) =>{
  await goodsStore.GetList(goodsStore.type,brand,1,8)
  await goodsStore.GetNum(goodsStore.type,brand)
  goodsStore.brand=brand
}

</script>

<template>
  <div class="common-layout">
    <el-container >
      <el-aside width="120px">
        <div class="el-aside__logo"></div>
        <el-menu
            active-text-color="#A8ABB2"
            background-color="#FFFFFF"
            @click=""
            text-color="#000000"
            router>
          <el-menu-item @click="on('Nike')">
            <span>Nike</span>
          </el-menu-item>
          <el-menu-item @click="on('安踏')">
            <span>安踏</span>
          </el-menu-item>
          <el-menu-item @click="on('彪马')">
            <span>彪马</span>
          </el-menu-item>
          <el-menu-item @click="on('NB')">
            <span>New Balance</span>
          </el-menu-item>
          <el-menu-item @click="on('Jordan')">
            <span>Jordan</span>
          </el-menu-item>
          <el-menu-item @click="on('adidas ')">
            <span>adidas </span>
          </el-menu-item>
          <el-menu-item @click="on('回力')">
            <span>回力</span>
          </el-menu-item>
          <el-menu-item @click="on('BEIER')">
            <span>BEIER</span>
          </el-menu-item>
          <el-menu-item @click="on('Vans')">
            <span>Vans</span>
          </el-menu-item>

        </el-menu>
      </el-aside>

<!--      -->
      <el-main class="main">
        <slot v-if="goodsStore.goodsList.length!==0" ></slot>
        <el-empty :image-size="200" v-else />
      </el-main>
    </el-container>

    <div class="footer">
      <Footer></Footer>
    </div>


  </div>
</template>

<style lang="scss" scoped>
.el-aside {
  text-align: center;
  background-color: #EBEDF0;
  &__logo {
    height: 60px;
  }
  .el-menu {
    border-right: none;
  }
}w

.main{
  height: 700px;
}
.footer {
  position: relative;
  width: 100%;
  margin-left: 5px;
  justify-content: center;
  align-items: center;
  height: 150px;
}
</style>
